<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
       .w1{
            width: 600px;
            height: 400px;
        }
        .w3{
            width: 80px;
            line-height: 30px;
            display: inline-block;
            padding: 0px 0px 0px 15px;
        }
        div .w3 a{
            text-decoration:none;
            color: black;
        }
        .w4{
            height: 50px;
            font-size: 14px;
            color:#CCC4C6;
            padding: 10px 0px 0px 15px;
        }
        div input{
            line-height: 28px;
            width: 260px;
            border:1px solid #ECECEC;
            outline: none;
        }
        .w5{
            font-size: 14px;
            color:#CCC4C6;
        }
        #kw input{
            width: 20px;
            margin: 20px 0px 35px 40px;
        }
        #wk input{
            border: none;
            color: white;
            width: 180px;
            height: 40px;
            margin: 20px 0px 0px 40px;
            border-radius: 10px;
            background-color: #55ABE8;
        }
        div p.w5  input{
            line-height: 28px;
            width: 150px;
            margin: 10px 0px 0px 15px;
            background-image: url("../图/login-input3.png");
            background-repeat: no-repeat;
        }
        div p[class*=w] input{
            padding-left:40px ;
            background-repeat: no-repeat;
            background-position: 5px 7px;
        }

       div p:nth-of-type(1) input{
           background-image: url("../图/login-input5.png");
       }
        div p:nth-of-type(2) input{
            background-image: url("../图/login-input1.png");
        }
        div p:nth-of-type(3) input{
            background-image: url("../图/login-input2.png");
        }
        div p:nth-of-type(4) input{
            background-image: url("../图/login-input2.png");
        }




    </style>
</head>
<body>
<div class="w1">
    <div class="w3"><a href="#">手机注册</a></div>
    <div class="w3"><a href="#">邮箱注册</a></div>
    <div>
        <form>
            <p class="w4"><input type="email" name="email" placeholder="请输入您的常用邮箱" class="ee">请输入您的常用邮箱</p>
            <p class="w4"><input type="text" placeholder="请输入昵称">4-12位字符、英文、数字或者中文均可</p>
            <p class="w4"><input type="password" placeholder="请输入密码">6-16位字符或数字、字母,区分大小写</p>
            <p class="w4"><input type="password" placeholder="请再次输入密码"></p>
            <p class="w5" ><input type="text" placeholder="请输入右侧验证码"><img src="../图/60a.png"></img>不区分大小写，点击图片可更换</p>
            <p id="kw"><input type="checkbox">同意<span><a href="#">用户服务条款</a></span></p>
            <p id="wk"><input type="submit" value="注册"></p>
        </form>
    </div>
</div>


</body>
</html>